<template>
  <a-table
    v-bind="tableProps"
  >
    <template #repay_methods="text">
      {{ text | days }}
    </template>
    <!-- <a slot="number" slot-scope="text, row" @click="hanlderRow(row)">{{ text }}</a> -->
  </a-table>
</template>
<script>
import { getUserOrderTasks } from '@/api/flow/work'
import table from '@/utils/mixins/search/table'
import columns from '@/views/credit/loan/mixins/columns'
import props from './props'
import filters from '@/utils/mixins/order/loan/filters'

export default {
  mixins: [table, props, columns, filters],

  data () {
    return {
      columns: [
        {
          title: '订单号',
          dataIndex: 'number',
          width: '200px',
          ellipsis: true,
          align: 'center',
          scopedSlots: { customRender: 'number' },
        },
        {
          title: '申请时间',
          dataIndex: 'create_time',
          width: '160px',
          align: 'center',
          ellipsis: true,
        },
        {
          title: '借款金额/$',
          dataIndex: 'borrow_money',
          width: '160px',
          align: 'center',
          ellipsis: true,
        },
        {
          title: '借款总期限',
          dataIndex: 'repay_methods',
          width: '160px',
          align: 'center',
          ellipsis: true,
          scopedSlots: { customRender: 'repay_methods' },
        },
        {
          title: '手续费/$',
          dataIndex: 'poundage',
          width: '160px',
          align: 'center',
          ellipsis: true,
        },
        {
          title: '利息比例/%',
          dataIndex: 'interest',
          width: '160px',
          align: 'center',
          ellipsis: true,
        },
        {
          title: '滞纳金比例/%',
          dataIndex: 'delay_payment',
          width: '160px',
          align: 'center',
          ellipsis: true,
        },
        {
          title: '实际还款金额$',
          dataIndex: 'amount',
          width: '160px',
          align: 'center',
          ellipsis: true,
        },
      ],
    }
  },

  created () {
    this.tableHooksRequest()
  },

  computed: {
    tableParams () {
      const { per_page, page } = this.pagination
      return [per_page, page, { uid: this.uid }]
    },
  },

  methods: {
     async tableHooksRequest () {
      try {
        const res = await this.getTableDatas(getUserOrderTasks, this.tableParams)
        return res
      } catch (error) {
        throw new Error(error)
      }
    },

    // hanlder row
    hanlderRow ({ task_id: tid }) {
      this.$router.push({
        name: 'ExamineAwaitDetails',
        params: { tid },
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.icon {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: $theme-color;
  margin-right: $margin-base;
}

.icon--red {
  background-color: $red;
}
</style>
